<script setup lang="ts">
defineOptions({
  name: "Welcome"
});
import { ElMessage } from "element-plus";
import router from "@/router";
import { onMounted, ref } from "vue";
import { useUserStore } from "@/store/modules/user";
import { UserInfo } from "@/model/user";

// 当前登录用户
const user = ref({} as UserInfo);

// 获取当前登录用户信息
const getCurrentUser = () => {
  const userLogin = useUserStore().$state.user as UserInfo;
  // 未登录,禁止访问
  if (userLogin == null) {
    ElMessage.error("请先登录");
    return router.push("/error/403");
  }
  // 已登录
  user.value = userLogin;
};

onMounted(() => {
  getCurrentUser();
});
</script>

<template>
  <div id="content">
    <el-card>
      <h3 class="title">基本信息</h3>
      <div>
        <div class="item">授权额度：{{ user.deliverNum }}</div>
        <div class="item">邮箱：{{ user.email }}</div>
        <div class="item">账号：{{ user.userAccount }}</div>
        <div class="item">
          用户角色：
          <el-tag type="danger" v-if="user.userRole === 'root'">站长</el-tag>
          <el-tag type="success" v-if="user.userRole === 'admin'"
          >管理员
          </el-tag>
          <el-tag type="warning" v-if="user.userRole === 'agency'"
          >代理人
          </el-tag>
        </div>
        <div class="item">注册时间：{{ user.createTime }}</div>
      </div>
    </el-card>
  </div>
</template>
<style>
.item {
  margin-left: 12px;
  margin-bottom: 15px;
  margin-top: 10px;
  font-size: 16px;
}

.title {
  margin-left: 12px;
  margin-bottom: 15px;
  margin-top: 10px;
}
</style>
